<template>
	<view class="complaint-pages">
		<view class="tips-item">
			<view class="iconfont icon-a-jinggao1"></view>
			<view class="tips">对保障性住房转租等现象投诉举报</view>
		</view>
		<view class="form-block">
			<view class="title">投诉举报</view>
			<view class="form-item">
				<view class="name-item">
					<view class="must">*</view>
					<view class="name">是否匿名</view>
				</view>
				<uni-data-select :localdata="isAnonymous" placeholder="请选择是否匿名" @change="change" class="form-crl"
					v-model="form.isAnonymous"></uni-data-select>
			</view>
			<view class="form-item">
				<view class="name-item">
					<view class="must">*</view>
					<view class="name">门牌号</view>
				</view>
				<input placeholder="请输入举报小区门牌号" v-model="form.house" maxlength="30" class="form-crl" />
				<!-- <uni-data-picker placeholder="请选择举报门牌号" @change="changeNumber" v-model="form.number" :map="listMap"
					class="form-crl" :localdata="list"></uni-data-picker> -->
			</view>
			<view class="form-item">
				<view class="name-item">
					<view class="must">*</view>
					<view class="name">描述</view>
				</view>
				<textarea placeholder="请简述您要投诉举报的内容..." v-model="form.sketch" class="form-crl1" maxlength="100" />
			</view>
			<view class="form-item1">
				<view class="name-item">
					<view class="must"></view>
					<view class="name">上传图片</view>
				</view>
				<view class="upload-item">
					<view v-for="(item,index) in form.imageList" class="image-item">
						<view>
							<image mode="aspectFit" :src="backendStorage+item" @click="previewImg(item)" class="img">
							</image>

						</view>
						<view @click.stop="closeImg(index)" style="display: inline;">
							<view class="iconfont">
								<image src="/static/delete.png" class="delete"></image>
							</view>
						</view>
					</view>
					<view class="upload-content" v-if="form.imageList.length<6" @click="chooseImage">
						<image src="/static/upload.png" class="upload-img"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="btn normal" @click="submit">提交</view>
	</view>
</template>

<script>
	import {
		uploadFile
	} from '@/api/file.js';
	import {
		saveReportApi
	} from '@/api/complaint.js'
	import {
		validate
	} from '@/util/validate.js';
	export default {
		data() {
			return {
				form: {
					isAnonymous: 1,
					house: '',
					//number: 0,
					sketch: '',
					imageList: []
				},
				rule: {
					house: {
						name: '门牌号',
						required: true,
					},
					sketch: {
						name: '描述',
						required: true,
					},
				},
				isAnonymous: [{
					value: 1,
					text: '是'
				}, {
					value: 0,
					text: '否'
				}],
				list: [{
						id: 1,
						name: '北片',
						children: [{
							id: 6,
							name: '西北街道'
						}]
					},
					{
						id: 2,
						name: '南片',
						children: [{
							id: 8,
							name: '西南街道'
						}]
					}
				],
				listMap: {
					value: 'id',
					text: 'name',
					children: 'children'
				},
				imageList: []
			}
		},
		methods: {
			change(e) {
				this.form.isAnonymous = e
			},
			changeNumber(e) {
				console.log(e)
			},
			previewImg(url) {
				uni.previewImage({
					urls: [this.cloudStorage + url],
				});
			},
			// 删除图片
			closeImg(index) {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '是否删除当前文件',
					success: function(res) {
						if (res.confirm) {
							that.form.imageList.splice(index, 1);
						}
					}
				});
			},
			chooseImage(e) {
				var that = this;
				uni.chooseImage({
					count: 6 - this.form.imageList.length,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: function(res) {
						console.log(res.tempFiles)
						res.tempFiles.forEach(async item => {
							let path = await uploadFile(item.path)
							that.form.imageList.push(path);
						})
					}
				});
			},
			submit() {
				if (validate(this.form, this.rule)) {
					uni.showLoading({
						title: '提交中...',
						mask: true
					});
					saveReportApi(this.form).then((res) => {
						uni.hideLoading();
						this.showToast('提交成功', () => {
							uni.navigateTo({
								url: '/page_pack/complaint/list'
							})
						}, 1000)
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.complaint-pages {
		padding: 30rpx;

		.tips-item {
			background: $error-background;
			padding: 30rpx;
			display: flex;
			align-items: center;
			color: $theme-color;
			border-radius: 20rpx;
			margin-bottom: 30rpx;

			.iconfont {
				margin-right: 10rpx;
			}

			.tips {
				font-size: 30rpx;
			}
		}

		.form-block {
			background-color: #fff;
			padding: 30rpx;
			margin-bottom: 30rpx;
			border-radius: 20rpx;

			.title {
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 30rpx;
			}


			.name-item {
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;

				.must {
					color: $theme-color;
				}

				.name {
					font-size: 30rpx;
				}
			}

			.form-item {
				margin-bottom: 30rpx;
				border-bottom: 1px solid #f7f7f7;
				padding-bottom: 10rpx;

				.form-crl {
					font-size: 30rpx;
				}

				.form-crl1 {
					font-size: 30rpx;
					height: 160rpx;
				}

				.placeholder {
					color: grey;
					font-size: 15px;
				}
			}

			.form-item1 {
				.upload-item {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					margin-top: 40rpx;

					.image-item {
						margin-bottom: 20rpx;
						margin-right: 20rpx;
						display: flex;
						flex-direction: row;

						.img {
							width: 190rpx;
							height: 200rpx;
							border-radius: 20rpx;
						}

						.iconfont {
							.delete {
								width: 18px;
								height: 18px;
								position: absolute;
								margin-left: -30rpx;
							}
						}
					}

					.image-item:nth-child(3n) {
						margin-right: 0;
					}

					.delete-item {
						width: 100%;
						display: flex;
						justify-content: flex-end;

						.delete {
							width: 20px;
							height: 20px;
							position: absolute;
						}
					}

					.upload-content {
						position: relative;
						background: #f8f8f8;
						border-radius: 10px;
						width: 200rpx;
						height: 200rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-bottom: 20rpx;

						.upload-img {
							width: 60rpx;
							height: 60rpx;
						}
					}
				}
			}
		}

		.btn {
			border-radius: 20rpx;
		}
	}
</style>